<template>
  <div class="addUnion">
    <div class="union_title">{{$t("union.addUnion")}}</div>
    <div class="union_items">
      <div>{{$t("union.name")}}</div>
      <div>{{UnionName.name}}</div>
    </div>
    <div class="union_items">
      <div>{{$t("union.cost")}}</div>
      <div class="union_m">1USDT</div>
    </div>
    <button class="union_join" @click="closeMoney">{{$t("union.add")}}</button>
  </div>
</template>

<script setup>
    import {ref, computed} from "vue";
    import {useStore} from 'vuex'
    import http from '../../../../http'
    import {useI18n} from "vue-i18n";
    const { t } = useI18n();

    const { state, commit} = useStore ()
    let UnionName = computed(() => state.UnionName)
    const closeMoney = async () => {
      var res = await http.post(`/api/union/join?id=${state.UnionName.id}`)
      if (res.code === 200) {
        Toast(t('tips.submit'))
      }
      commit('changeOverlay',false)
    }
</script>

<style scoped lang="scss">
  .addUnion {
    width: 345px;
    height: 253px;
    background: #000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 63px;
    padding: 20px 15px 0 15px;
    text-align: center;
  }

  .union_title {
    /*width: 80px;*/
    height: 28px;
    font-size: 20px;
    @include fontSCMedium;
    font-weight: 500;
    color: #d8bc84;
    line-height: 28px;
  }

  .union_join {
    width: 315px;
    height: 44px;
    background: #d8bc84;
    border-radius: 5px;
    font-size: 17px;
    @include fontSCRegular;
    font-weight: 400;
    color: #0b0b09;
    line-height: 44px;
    margin-top: 30px;
  }

  .union_items {
    @include flex;
    margin-top: 20px;

    div {
      font-size: 14px;
      @include fontSCRegular;
      font-weight: 400;
      color: $color1;
    }
  }

  .union_m {
    font-size: 18px !important;
    color: $color !important;
  }
</style>
